<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{width: 200px; height: 100px; background-color: red;position: absolute; text-align: center; color: #fff; font-weight: bold;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		var timer = null;
		var iSpeedX = 12;
		var iSpeedY = 8;
		//var lastX = 0;		//检测停止用
		var lastSpeedY = 0;			//检测停止用

		var yMax = document.documentElement.clientHeight - oDiv.offsetHeight;
		var xMax = document.documentElement.clientWidth - oDiv.offsetWidth;

		oDiv.onclick = function (){
			clearInterval(timer);
			timer = setInterval(function (){
				iSpeedY += 2;		//y轴方向上是加速运动

				var x = oDiv.offsetLeft + iSpeedX;
				var y = oDiv.offsetTop + iSpeedY;

				if (y > yMax) {
					iSpeedY *= -0.8;			//既改变速度大小也改变方向
					iSpeedX *= 0.8;				//只改变速度大小(我下面的标准是，反正每次碰到墙，所有方向上的速度都减小)
					y = yMax;		//使其一瞬间不会有滚动条出现碰撞
				}else if(y < 0){
					iSpeedY *= -0.8;
					iSpeedX *= 0.8;
					y=0;
				};

				if (x > xMax) {
					iSpeedX *= -0.8;
					x = xMax;			//使其一瞬间不会有滚动条出现碰撞
				}else if(x < 0){
					iSpeedX *= -0.8;
					x = 0;
				};
				
				oDiv.style.left = x + 'px';
				oDiv.style.top = y + 'px';

				//检测停止
				if (Math.abs(iSpeedY - lastSpeedY) < 0.5 && Math.abs(iSpeedX) < 1) {//让当前的速度iSpeedY和上一个速度lastY相比,加上ispeedX是为了更加严谨，更加理想
					//iSpeedX = 0;
					//iSpeedY = 0;
					clearInterval(timer)
				};

				//lastSpeedX = iSpeedX;		//最后才更新lastX/Y的赋值(因为是下落的，所以就不需要lastX)
				lastSpeedY = iSpeedY;

				//测试用
				oDiv.innerHTML = 'x:'+ iSpeedX +'<br>y:'+ iSpeedY+'<br>L:'+ oDiv.offsetLeft+'<br>T:'+ oDiv.offsetTop;
				document.getElementsByTagName('textarea')[0].innerHTML += 'y:'+ iSpeedY +'\n';
			},30)
		};
	}
	</script>
</head>
<body>
	<div id="div1">点我</div>
	<textarea rows="10" cols="40"></textarea>
</body>
</html>